<template>
  <div class="page">
    <div class="headers">
      <div class="tabsList">
        <div v-for="(item, index) in gglList" :key="index">
          <a-tag :color="item.ggl ? 'red' : 'green'" class="tags">
            {{ item.ggl ? '阳' : '阴' }}
          </a-tag>
        </div>
      </div>

      <div class="buttons">
        <a-button @click="startTap" type="primary" :icon="!spinning ? 'monitor' : 'loading'" :disabled="spinning"
          >开始占卜</a-button
        >
        <a-button @click="cancelTap" class="cancelButton">新卦</a-button>
      </div>
    </div>
    <a-spin :spinning="spinning" tip="正在占卜中...">
      <a-table :columns="columns" :data-source="dataList" :pagination="false">
        <span slot="one" slot-scope="one">
          <a-tag :color="one === '阳' ? 'red' : 'green'">
            {{ one }}
          </a-tag>
        </span>
        <span slot="two" slot-scope="two">
          <a-tag :color="two === '阳' ? 'red' : 'green'">
            {{ two }}
          </a-tag>
        </span>
        <span slot="three" slot-scope="three">
          <a-tag :color="three === '阳' ? 'red' : 'green'">
            {{ three }}
          </a-tag>
        </span>
        <span slot="record" slot-scope="record">
          <a-tag :color="getconclusionColor(record)">
            {{ record }}
          </a-tag>
        </span>
        <template slot="footer" slot-scope="currentPageData">
          <div class="tablefooter" v-if="dataList.length === 6">
            <div style="white-space: pre-wrap">结论：{{ conclusionMessage || '暂无（占卜六轮后才能得出结论）' }}</div>
            <div class="tablefooterRight">
              <div v-for="item in dataList" :key="item.dataIndex">{{ item.conclusion }}</div>
            </div>
          </div>
        </template>
      </a-table>
    </a-spin>
  </div>
</template>

<script>
export default {
  name: 'Divnation',
  data() {
    return {
      //
      gglList: [{ ggl: '阳' }, { ggl: '阳' }, { ggl: '阳' }],
      //结果
      dataList: [],
      index: 0,
      columns: [
        {
          title: '第几轮',
          dataIndex: 'dataIndex',
          key: 'dataIndex',
          align: 'center',
        },
        {
          title: '第一个',
          dataIndex: 'one',
          key: 'one',
          slots: { title: 'one' },
          scopedSlots: { customRender: 'one' },
          align: 'center',
        },
        {
          title: '第二个',
          dataIndex: 'two',
          key: 'two',
          slots: { title: 'two' },
          scopedSlots: { customRender: 'two' },
          align: 'center',
        },
        {
          title: '第三个',
          dataIndex: 'three',
          key: 'three',
          slots: { title: 'three' },
          scopedSlots: { customRender: 'three' },
          align: 'center',
        },
        {
          title: '记录',
          dataIndex: 'record',
          key: 'record',
          slots: { title: 'record' },
          scopedSlots: { customRender: 'record' },
          align: 'center',
        },
      ],
      spinning: false,
      //计时器
      interval: null,
      //结论
      conclusionMessage: '从下往上看结果\n,x和○是变卦\n,- -和—静卦\n,- -大于是忌\n，—大于三次是宜\n，--等于—是无事发生',
    }
  },
  beforeDestroy() {
    clearInterval(this.interval)
  },
  methods: {
    //重置
    cancelTap() {
      Object.assign(this.$data, this.$options.data())
    },
    async startTap() {
      if (this.index >= 6) {
        this.$message.warn('此次占卜结果已出！')
        return
      }
      this.index++
      this.spinning = true
      this.$message.success(`开始第${this.index}轮，总计6轮!`)
      const _that = this
      this.interval = setInterval(() => {
        _that.gglList.forEach((item) => {
          item.ggl = Math.random(new Date()) > 0.5
        })
      }, 100)

      setTimeout(() => {
        clearInterval(this.interval)
        this.spinning = false

        this.dataList.unshift({
          dataIndex: this.index,
          one: this.gglList[0].ggl ? '阳' : '阴',
          two: this.gglList[1].ggl ? '阳' : '阴',
          three: this.gglList[2].ggl ? '阳' : '阴',
          record: this.getRecord(),
          conclusion: this.getConclusion(),
        })
        //当有三轮后
        if (this.dataList.length === 3) {
          this.getConclusionMessage()
        }
      }, 6666)
    },
    //三轮后结论
    getConclusionMessage() {
      // var dataList = this.dataList.map((e) => {
      //   return e.record
      // })
      // this.conclusionMessage = ''
    },
    //给小结论颜色
    getconclusionColor(val) {
      var color = ''
      switch (val) {
        case '老阳':
          color = 'red'
          break
        case '少阳':
          color = '#d64f44'
          break
        case '少阴':
          color = '#84bf96'
          break
        case '老阴':
          color = 'green'
          break

        default:
          color = ''
          break
      }
      return color
    },
    //卦象
    getConclusion() {
      var title = ''
      var isFlag = this.gglList.filter((e) => {
        if (e.ggl) return e
      })

      switch (isFlag.length) {
        case 0:
          title = '- -x'
          break
        case 1:
          title = '- -'
          break
        case 2:
          title = '—'
          break
        case 3:
          title = '—○'
          break
        default:
          title = ''
          break
      }
      return title
    },
    getRecord() {
      var title = ''
      var isFlag = this.gglList.filter((e) => {
        if (e.ggl) return e
      })

      switch (isFlag.length) {
        case 0:
          title = '老阴'
          break
        case 1:
          title = '少阴'
          break
        case 2:
          title = '少阳'
          break
        case 3:
          title = '老阳'
          break
        default:
          title = ''
          break
      }
      return title
    },
  },
}
</script>

<style lang="less" scoped>
.page {
  width: 100%;
  height: 100%;
  .headers {
    margin-bottom: 24px;
    height: 100px;
    width: 100%;
    display: flex;
    flex-direction: column;
    .tabsList {
      display: flex;
      flex-direction: row;
      .tags {
        width: 60px;
        height: 60px;
        font-size: 35px;
        align-items: center;
        justify-content: center;
        display: flex;
      }
    }
    .buttons {
      padding: 12px 0;
      .cancelButton {
        left: 20px;
      }
    }
  }
  .tablefooter {
    color: #aeaeae;
    display: flex;
    justify-content: space-around;
    .tablefooterRight {
      border: 1px solid #aeaeae;
      padding: 0 10px;
      line-height: 16px;
      display: flex;
      font-size: 19px;
      color: #000;
      flex-direction: column;
    }
  }
}
</style>